<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="index.css" />
    <script src="vue.js"></script>
    <script src="axios.js"></script>
    <script src="elementui.js"></script>
    <script src="common.js"></script>
    <title>Document</title>
</head>
<style>
    .el-header{  /*上面 */
            border-bottom: 1px solid red;
            background: linear-gradient(to right,pink ,rgb(232, 94, 94));
        }
        .el-aside{ /*左边 */
            border-right: 1px solid green;
            position: absolute;   /*绝对定位*/
            top: 60px;
            bottom: 0px;
        }
        .el-main{ /*右边 */
            /* border: 1px solid blue; */
            position: absolute;   /*绝对定位*/
            top: 60px;
            left: 200px;
            right: 0px;     
            bottom: 0px;
            padding: 0;
        }
        body{
            margin: 0;
        }
</style>
<body>
    <div id="app">
        <el-container>
            <el-header>
                欢迎你：{{username.uname}}&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="#" @click="logout">退出登录</a>
            </el-header>
            <el-container>

              <el-aside width="200px">
                <el-tree :data="treedata" :props="defaultProps" @node-click="handleNodeClick">
                    <span class="custom-tree-node" slot-scope="{ node, data }">
                        <span>
                            <i :class="data.imgicon"></i>{{ node.label }}
                        </span>           
                    </span>
                </el-tree>

              </el-aside>
              <el-main>
                <iframe :src="src" frameborder="0" width="100%" height="100%"></iframe>
              </el-main>
            </el-container>
          </el-container>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                username:[],
                src:"",
                treedata: [{
                label: '一级 1',
                children: [{
                    label: '二级 1-1',
                    children: [{
                    label: '三级 1-1-1',
                    
                    }]
                }]
                }],
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                brief:'',
            }, methods: {
                logout(){
                   location.href='login.html'
                },
                handleNodeClick(data) {
                    this.src = data.brief;
                },
                initTreeData(){
                    axios.get(API+'selectUserMenu').then(res=>{
                        console.log(res);
                        
                        let s=arrayToTree(res.data.data.menuList);
                        this.treedata=s
                        let a=res.data.data.user
                        this.username=a
                    })
                }
            },mounted(){
                this.initTreeData(); //初始化树形菜单
            }
        })
    </script>
</body>
</html>



